<template>
  <div>
    <el-row :gutter="20">
      <!-- :disabled="terminalDialog.disabled" -->
      <el-form 
        label-width="120px"
        :model="terminalDialogForm"
        :rules="terminalDialogRules"
        ref="terminalDialogForm"
        >
        <el-col :span="12">
          <el-form-item label="型号:" prop="rpmNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpmNo"
              placeholder="请选择型号"
              @change="rpmNoChange"
            >
              <el-option
                v-for="item in rpmNoList"
                :key="item.rpmNo"
                :label="item.rpmName"
                :value="item.rpmNo"
              >
              <span style="float: left">{{ item.rpmName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpmNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" >
          <el-form-item label="门店:" prop="storeNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.storeNo"
              placeholder="请选择门店"
              @change="storeNoChange"
            >
              <el-option
                v-for="item in storeNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
              <span style="float: left">{{ item.rpsName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="简称:" prop="rtName">
            <el-input v-model="terminalDialogForm.rtName" placeholder="请输入简称" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// import { getstoreNo,getModelList } from "@/api/rb-core/terminal/terminal";

export default {
  props: {
    terminalDialog: {
      type: Object
    },
    //商户
    rpiNo: {
      type: String
    },
    // 终端表单
    terminalDialogForm:{
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    /**
     * @desc: 修改这个页面,terminal/component/terminalDialog.vue
     */
    return {
      // terminalDialogForm:{},
      terminalDialogRules:{
        // storeNo:[
        //   { required: true,message: '门店不能为空', trigger: 'blur' }
        // ],
        rpmNo:[
          { required: true, message: '型号不能为空', trigger: 'blur' }
        ],
        rtName:[
          { required: true, message: '简称不能为空', trigger: 'blur' }
        ]
      },
      storeNoList:[],// 门店
      rpmNoList:[]// 型号
    };
  },
  watch: {
    
  },
  created(){
     this.rpiNoListChange();//门店
     this.rptNoListChange();//型号
  },
  methods: {
    // 选择类型---获取型号列表
    rptNoListChange(){
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];
      getModelList(-1,-1,{rptNo:18}).then((res)=>{
        this.rpmNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 表单清空
    initEmpty() {
      this.$refs['terminalDialogForm'].resetFields();
      // this.$refs['terminalDialogForm'].terminalDialogForm = {};
      this.$refs['terminalDialogForm'].terminalDialogForm = {};
    },
    //选择商户---获取门店
    rpiNoListChange(){
      this.terminalDialogForm.storeNo="";//门店
      this.storeNoList=[];//门店
      getstoreNo(-1,-1,{rpiNo:this.rpiNo}).then((res)=>{
        this.storeNoList = res.data.data.records;
        this.$forceUpdate()
      })
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select {
  width:100%
}
/deep/ .el-input.is-disabled .el-input__inner{
  background-color: #fff;
}

/deep/ .el-form-item__content .el-input-group {
  vertical-align: baseline;
}
</style>
